<script setup lang="ts">
import type { accDtlData } from '../types';

interface IProps {
  data?: accDtlData;
  type?: 'detail' | 'list';
}

const props = withDefaults(defineProps<IProps>(), {
  type: 'list',
});

const isOpen = ref(props.type === 'detail');

const emit = defineEmits(['click']);
</script>

<template>
  <view class="view-shadow text-14" @click="emit('click')">
    <view
      v-if="type === 'list'"
      class="h-80 flex justify-between items-center px-4 bg-main-3 color-white border-2 border-solid border-gray-8 border-t-0 border-r-0 border-l-0"
      @click.stop="isOpen = !isOpen"
    >
      <view>{{ data.orderDtlId }}</view>
      <up-icon size="14" color="#fff" :name="isOpen ? 'arrow-up' : 'arrow-down'"></up-icon>
    </view>
    <app-cell v-else title="细单ID" titleClass="color-gray-9" :value="data.orderDtlId" border />
    <app-cell
      title="货品ID/名称"
      titleClass="color-gray-9"
      :value="`${data.goodsId}/${data.goodsName}`"
      border
    />
    <app-cell
      title="验收数量"
      titleClass="color-gray-9"
      :value="data.goodsQty"
      valueClass="color-main-3"
      border
    />
    <view v-show="isOpen">
      <app-cell title="UDI码" titleClass="color-gray-9" :value="data.udiCode" :border="isOpen" />
      <app-cell title="UDI码数量" titleClass="color-gray-9" :value="data.udiQty" border />
    </view>
    <app-cell
      title="UDI码包装层级"
      titleClass="color-gray-9"
      :value="data.udiLevel"
      :border="isOpen"
    />
    <view v-show="isOpen">
      <app-cell title="采集时间" titleClass="color-gray-9" :value="data.creDate" border />
      <app-cell title="备注" titleClass="color-gray-9" :value="data.memo" />
    </view>
  </view>
</template>
